<template>
  <star-horse-dialog :visible = "viewVisible" :title = "'查看数据'" :is-view = "true">
    <el-form :model = "ruleForm" class = "view-ruleForm" label-width = "15%" ref = "ruleForm">
      <el-form-item label = "主键" prop = "idDynamicForm">
        <span>{{ ruleForm.idDynamicForm }}</span>
      </el-form-item>
      <el-form-item label = "表单名称" prop = "formName">
        <span>{{ ruleForm.formName }}</span>
      </el-form-item>
      <el-form-item label = "标签长度" prop = "labelWidth">
        <span>{{ ruleForm.labelWidth }}</span>
      </el-form-item>
      <el-form-item label = "标签位置" prop = "labelPosition">
        <span>{{ ruleForm.labelPosition }}</span>
      </el-form-item>
      <el-form-item label = "表单域标签的后缀" prop = "labelSuffix">
        <span>{{ ruleForm.labelSuffix }}</span>
      </el-form-item>
      <el-form-item label = "表单验证规则名称" prop = "rules">
        <span>{{ ruleForm.rules }}</span>
      </el-form-item>
      <el-form-item label = "行内表单模式" prop = "inline">
        <span>{{ ruleForm.inline }}</span>
      </el-form-item>
      <el-form-item label = "是否禁用该表单内的所有组件" prop = "disabled">
        <span>{{ ruleForm.disabled }}</span>
      </el-form-item>
      <el-form-item label = "是否隐藏必填字段标签旁边的红色星号" prop = "hideRequiredAsterisk">
        <span>{{ ruleForm.hideRequiredAsterisk }}</span>
      </el-form-item>
      <el-form-item label = "当校验失败时，滚动到第一个错误表单项" prop = "scrolToError">
        <span>{{ ruleForm.scrolToError }}</span>
      </el-form-item>
      <el-form-item label = "星号的位置" prop = "requireAsteriskPosition">
        <span>{{ ruleForm.requireAsteriskPosition }}</span>
      </el-form-item>
      <el-form-item label = "是否在输入框中显示校验结果反馈图标" prop = "statusIcon">
        <span>{{ ruleForm.statusIcon }}</span>
      </el-form-item>
      <el-form-item label = "是否显示校验错误信息" prop = "showMessage">
        <span>{{ ruleForm.showMessage }}</span>
      </el-form-item>
      <el-form-item label = "是否以行内形式展示校验信息" prop = "inlineMessage">
        <span>{{ ruleForm.inlineMessage }}</span>
      </el-form-item>
      <el-form-item label = "是否在 rules 属性改变后立即触发一次验证" prop = "validateOnRuleChange">
        <span>{{ ruleForm.validateOnRuleChange }}</span>
      </el-form-item>
      <el-form-item label = "修改人" prop = "updatedBy">
        <span>{{ ruleForm.updatedBy }}</span>
      </el-form-item>
      <el-form-item label = "修改日期" prop = "updatedDate">
        <span>{{ ruleForm.updatedDate }}</span>
      </el-form-item>
      <el-form-item label = "创建人" prop = "createdBy">
        <span>{{ ruleForm.createdBy }}</span>
      </el-form-item>
      <el-form-item label = "创建日期" prop = "createdDate">
        <span>{{ ruleForm.createdDate }}</span>
      </el-form-item>
      <el-form-item label = "是否删除 1 是 0否" prop = "isDel">
        <span>{{ ruleForm.isDel }}</span>
      </el-form-item>
      <el-form-item label = "系统编号" prop = "dataNo">
        <span>{{ ruleForm.dataNo }}</span>
      </el-form-item>
      <el-form-item label = "状态名称" prop = "statusName">
        <span>{{ ruleForm.statusName }}</span>
      </el-form-item>
      <el-form-item label = "状态编码" prop = "statusCode">
        <span>{{ ruleForm.statusCode }}</span>
      </el-form-item>
    </el-form>
  </star-horse-dialog>
  <el-card>
    <!--查询区域-->
    <el-form class = "search_area" size = "default">
      <el-form-item label = "表单名称">
        <el-input placeholder = "请输入表单名称" v-model = "searchForm.formName"/>
      </el-form-item>
      <el-form-item label = "添加时间">
        <el-date-picker
            end-placeholder = "结束日期" placeholder = "请选择添加时间"
            range-separator = "到"
            start-placeholder = "开始日期"
            type = "daterange"
            v-model = "searchForm.createdDate"
        />
      </el-form-item>
      <el-form-item label = "     ">
        <el-button @click = "dataSearch" link type = "primary">
          <user-icon icon = "search" style = "vertical-align: middle;color:#e3e9f2;"/>
          <span style = "vertical-align: middle;"> 查询 </span>
        </el-button>
        <el-button @click = "dataSearch(1)" link small>
          <span style = "vertical-align: middle;"> 重置 </span>
        </el-button>
      </el-form-item>
    </el-form>
    <el-divider/>
    <ul class = "inner_button">
      <li v-if = "permission.add">
        <el-button @click = "btnOperation(1)" link title = "" type = "primary">
          <user-icon icon = "plus" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "新增">新增</el-tooltip>
        </el-button>
      </li>
      <li v-if = "permission.batchAdd">
        <el-button @click = "btnOperation(11)" title = "" type = "primary" link>
          <user-icon icon = "plus-square" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "批量新增">批量新增</el-tooltip>
        </el-button>
      </li>

      <li v-if = "permission.delete">
        <el-button @click = "btnOperation(4)" link title = "" type = "danger">
          <user-icon icon = "minus-square" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "批量删除">批量删除</el-tooltip>
        </el-button>
      </li>
      <li v-if = "permission.view">
        <el-button @click = "btnOperation(5)" link title = "" type = "primary">
          <user-icon icon = "sync" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "刷新">刷新</el-tooltip>

        </el-button>
      </li>
      <li v-if = "permission.download">
        <el-button @click = "btnOperation(6)" link title = "" type = "primary">
          <user-icon icon = "file-download" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "下载模板">下载模板</el-tooltip>
        </el-button>
      </li>
      <li v-if = "permission.execution">
        <el-button @click = "btnOperation(7)" link title = "" type = "primary">
          <user-icon icon = "play-circle" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "执行">执行</el-tooltip>
        </el-button>
      </li>
      <li v-if = "permission.upload">
        <el-upload
            :auto-upload = "true"
            :on-change = "upload"
            :on-error = "uploadError"
            :on-progress = "uploadProcess"
            :on-success = "uploadSuccess"
            :show-file-list = "false"
            action = "/system-config/system/dynamicForm/importData"
            class = "upload-demo"
            name = "file"
        >
          <el-button link title = "" type = "primary">
            <user-icon icon = "file-upload" style = "vertical-align: middle;color:#e3e9f2;"/>
            <el-tooltip content = "上传">上传</el-tooltip>
          </el-button>

        </el-upload>
      </li>
      <li v-if = "permission.export">
        <el-button @click = "btnOperation(8)" link title = "" type = "primary">
          <user-icon icon = "file-export" style = "vertical-align: middle;color:#e3e9f2;"/>
          <el-tooltip content = "导出">导出</el-tooltip>
        </el-button>
      </li>
    </ul>
    <el-table
        :data = "dataList"
        :row-key = "getRowIdentity"
        @row-dblclick = "editData"
        @selection-change = "handleSelectionChange"
        border
        fit = "true"
        highlight-current-row = "true"
        id = "dynamicForm"
        max-height = "470px"
        ref = "multipleTable"
        stripe = "true"
        style = "width: 100%;height:81%">
      <el-table-column fixed width = "1"/>
      <el-table-column
          :reserve-selection = "true"
          align = "center"
          fixed = "left"
          type = "selection"
      />
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "主键"
          min-width = "200px"
          prop = "idDynamicForm"
          sortable
          v-if = "false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "表单名称"
          min-width = "200px"
          prop = "formName"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "标签长度"
          min-width = "200px"
          prop = "labelWidth"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "标签位置"
          min-width = "200px"
          prop = "labelPosition"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "表单域标签的后缀"
          min-width = "200px"
          prop = "labelSuffix"
          sortable
          v-if = "true ">
        <template #header = "scope">
          <el-tooltip class = "box-item"
                      content = "表单域标签的后缀"
                      effect = "dark"
                      placement = "top-start">表单域标签的后缀
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "表单验证规则名称"
          min-width = "200px"
          prop = "rules"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "行内表单模式"
          min-width = "200px"
          prop = "inline"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = ""
          min-width = "200px"
          prop = "disabled"
          sortable
          v-if = "true ">
        <template #header = "scope">
          <el-tooltip class = "box-item"
                      content = "是否禁用该表单内的所有组件"
                      effect = "dark"
                      placement = "top-start">是否禁用表单...
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          min-width = "200px"
          prop = "hideRequiredAsterisk"
          sortable
          v-if = "true ">
        <template #header = "scope">
          <el-tooltip class = "box-item"
                      content = "是否隐藏必填字段标签旁边的红色星号"
                      effect = "dark"
                      placement = "top-start">是否隐藏必填字段...
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "当校验失败时，滚动到第一个错误表单项"
          min-width = "200px"
          prop = "scrolToError"
          sortable
          v-if = "true ">
        <template #header = "scope">
          <el-tooltip class = "box-item"
                      content = "当校验失败时，滚动到第一个错误表单项"
                      effect = "dark"
                      placement = "top-start">当校验失败时滚动...
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "星号的位置"
          min-width = "200px"
          prop = "requireAsteriskPosition"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = ""
          min-width = "200px"
          prop = "statusIcon"
          sortable
          v-if = "true ">
        <template #header = "scope">
          <el-tooltip class = "box-item"
                      content = "是否在输入框中显示校验结果反馈图标"
                      effect = "dark"
                      placement = "top-start">是否在输入框中显示...
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "是否显示校验错误信息"
          min-width = "200px"
          prop = "showMessage"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = ""
          min-width = "200px"
          prop = "inlineMessage"
          sortable
          v-if = "true ">
        <template #header = "scope">
          <el-tooltip class = "box-item"
                      content = "是否以行内形式展示校验信息"
                      effect = "dark"
                      placement = "top-start">是否以行内...
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = ""
          min-width = "200px"
          prop = "validateOnRuleChange"
          sortable
          v-if = "true ">
        <template #header = "scope">
          <el-tooltip class = "box-item"
                      content = "是否在 rules 属性改变后立即触发一次验证"
                      effect = "dark"
                      placement = "top-start">是否在rules属性...
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改人"
          min-width = "200px"
          prop = "updatedBy"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "修改日期"
          min-width = "200px"
          prop = "updatedDate"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建人"
          min-width = "200px"
          prop = "createdBy"
          sortable
          v-if = " true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "创建日期"
          min-width = "200px"
          prop = "createdDate"
          sortable
          v-if = " true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "是否删除 1 是 0否"
          min-width = "200px"
          prop = "isDel"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "系统编号"
          min-width = "200px"
          prop = "dataNo"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "状态名称"
          min-width = "200px"
          prop = "statusName"
          sortable
          v-if = "true ">
      </el-table-column>
      <el-table-column
          :formatter = "dataFormat"
          :show-overflow-tooltip = "true"
          label = "状态编码"
          min-width = "200px"
          prop = "statusCode"
          sortable
          v-if = " false ">
      </el-table-column>
      <el-table-column fixed = "right" label = "操作" min-width = "180px">
        <template #default = "scope">
          <el-button v-if = "permission.edit" @click = "editById(scope.row[primaryKey])" link title = ""
                     type = "primary">
            <el-tooltip content = "编辑">编辑</el-tooltip>
          </el-button>
          <el-button v-if = "permission.view" @click = "viewById(scope.row[primaryKey])" link title = ""
                     type = "primary">
            <el-tooltip content = "查看">查看</el-tooltip>
          </el-button>
          <el-button v-if = "permission.delete" @click = "deleteById(scope.row[primaryKey])" link title = ""
                     type = "danger">
            <el-tooltip content = "删除">删除</el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-divider/>
    <el-pagination
        :total = "totalData"
        @current-change = "pageChangeClick"
        @size-change = "pageSizeClick"
        layout = "total, sizes, prev, pager, next, jumper"
        v-model:currentPage = "currentPage"
        v-model:page-size = "pageSize"
        v-model:pageCount = "totalPage"/>
  </el-card>
</template>
<style lang = "scss" scoped>

</style>
<script>
import {useRouter} from "vue-router";

import {common} from "../../api/common";
import {ref} from "vue";

export default {
  name: "DynamicForm",

  mixins: [common],
  setup() {
    return {}
  },
  data() {
    const loadByPageUrl = ref("/system-config/system/dynamicForm/pageList");
    const mergeUrl = ref("/system-config/system/dynamicForm/merge");
    const mergeDraftUrl = ref("/system-config/system/dynamicForm/mergeDraft");
    const batchMergeUrl = ref("/system-config/system/dynamicForm/mergeBatch");
    const batchMergeDraftUrl = ref("/system-config/system/dynamicForm/mergeBatchDraft");
    const loadByIdUrl = ref("/system-config/system/dynamicForm/getById");
    const deleteUrl = ref("/system-config/system/dynamicForm/batchDeleteByIdLogic");
    const exportAllUrl = ref("/system-config/system/dynamicForm/exportData");
    const downloadTemplateUrl = ref("/system-config/system/dynamicForm/downloadTemplate");
    const primaryKey = "idDynamicForm";
    const router = useRouter();
    return {
      loadByPageUrl,
      mergeUrl,
      mergeDraftUrl,
      batchMergeUrl,
      batchMergeDraftUrl,
      loadByIdUrl,
      deleteUrl,
      exportAllUrl,
      downloadTemplateUrl,
      primaryKey,
      router
    }
  },
  methods: {
    editById(id) {
      this.router.push({path: "/dynamicform", query: {formId: id, isEdit: 1}});
    },
    viewById(id) {
      this.router.push({path: "/dynamicform", query: {formId: id, isEdit: 2}});
    },
    addDataFun() {
      this.router.push({path: "/dynamicform"});
    },
    dataFormat(row, column, cellValue, index) {
      cellValue = this.commonDataFormat(row, column, cellValue, index);

      return cellValue;
    },

    /**
     * 初始化数据
     */
    init: function () {
      this.dataList = [];
      this.selectData = [];
      this.loadByPage(this.currentPage, this.pageSize);
      this.loadPermissionResources();
      this.commonSelectData("sys_dynamic_form");

    },

    parseSearchData: function () {
      let data = this.searchForm;
      let arr = [];
      if (data.formName) {
        arr.push({
          propertyName: "formName",
          value: data.formName,
          operation: "lk"
        });
      }
      if (data.createdDate) {
        arr.push({
          propertyName: "createdDate",
          value: data.createdDate,
          operation: "bt"
        });
      }
      return arr;
    }

  },
  created() {
    this.init();
  }
}
</script>